<template>
	<scroll-view
		scroll-x="true"
		:style="{
			top: stickyTop + 'rpx'
		}"
		:scroll-left="scrollLeft"
		:scroll-with-animation="true"
		:show-scrollbar="false"
		class="tab-list"
	>
		<view
			class="tab-item"
			v-for="(item, index) in list"
			:key="index"
			:class="[{ active: active === index }]"
			@tap="tabChange(index)"
		>
			{{ item.label }}
		</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'Tab',
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		index: {
			type: Number,
			default: () => {
				return 0;
			}
		},
		stickyTop: {
			type: [Number],
			default: 0
		}
	},
	data() {
		return {
			active: 0
		};
	},
	computed: {
		scrollLeft() {
			return (this.active - 1) * 45;
		}
	},
	watch: {
		index: {
			immediate: true,
			handler(val) {
				this.active = val;
			}
		}
	},
	methods: {
		tabChange(index) {
			this.active = index;
			this.$emit('tabChange', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.tab-list {
	width: 100%;
	white-space: nowrap;
	background: #ffffff;
	text-align: center;
	position: sticky;
	z-index: 10;
	padding: 16rpx 12rpx;
	box-sizing: border-box;
	.tab-item {
		display: inline-block;
		padding: 0 18rpx;
		line-height: 48rpx;
		font-size: 26rpx;
		color: #171717;
		transition: 0.5s;
		border-radius: 8rpx;
		background: #F4F5F6;
		margin: 0 8rpx;
		&.active {
			color: #fff;
			background: $uni-color-primary;
		}
	}
}
</style>
